let box = document.getElementById('box'),	// 获取最外层的盒子
	btnArr = document.getElementsByClassName('btn'),	// 获取按钮集合
	nanDu = document.getElementsByClassName('nanDu')[0],	// 获取难道选择界面
	kaiShi = document.getElementsByClassName('kaiShi')[0],	// 获取初始化界面
	bgArr = ['img/bg_1.jpg','img/bg_2.jpg','img/bg_3.jpg','img/bg_4.jpg'],	// 定义背景图片数组
	PositionY = 0,mytime;	// 初始化背景图片的PositionY属性
	
function run() {	// 背景图片移动动画方法
	PositionY += 1;	
	box.style.backgroundPositionY = PositionY + 'px';
	mytime = setTimeout(function() {run()}, 1);
}

for (let i = 0; i < btnArr.length-1; i++) {	// 遍历按钮
	btnArr[i].addEventListener("touchstart",(res) => {	// 给每个按钮添加手指按下事件 => ES6里面的箭头函数
		let clientX = res.changedTouches[0].clientX,	// 手指按下X轴坐标
			clientY = res.changedTouches[0].clientY,	// 手指按下Y轴坐标
			fjDiv = document.createElement('div'),	// 创建一个div
			fjImg = new Image();	// 创建一个Image对象
		fjImg.src = 'img/plane_1.png';	// 给Image对象的src属性添加图片
		fjDiv.myWidth = 100;	// 自定义属性div的宽度
		fjDiv.myHeigth = 100;	// 自定义属性div的高度
		fjDiv.className = 'feiJi';	// 给div添加类名 feiJi
		fjDiv.style.cssText = 	//给div添加css样式
			`
				width: ${fjDiv.myWidth}px;
				height: ${fjDiv.myHeigth}px;
				position: absolute;
				left: ${clientX-fjDiv.myWidth/2}px;
				top: ${clientY-fjDiv.myHeigth/2}px;
			`
		fjImg.style.cssText = "width: 100%;height: 100%;"	// 给图片添加样式
		fjDiv.appendChild(fjImg);	// 把图片添加到div里面
		kaiShi.appendChild(fjDiv);	// 把div添加到初始化界面里
		box.style.background = 'url('+ bgArr[i] +')';	// 切换背景图片
		box.style.backgroundSize = '100%';	// 给背景图片添加css样式
		kaiShi.className += ' show';	// 显示初始化界面
		nanDu.className = 'nanDu';	// 隐藏难度选择界面
		run()	// 调用背景移动动画方法
		fjmove(fjDiv)	// 调用飞机移动方法
		fire()	// 调用创建子弹方法
		fireRun()	// 调用子弹运动方法
	})
}

function fjmove(obj) {	// 飞机移动方法
	obj.addEventListener("touchmove",(res) => {	// 给飞机添加手指按下移动事件
		let	clientX = res.changedTouches[0].clientX,
			clientY = res.changedTouches[0].clientY,
			myWidth = window.screen.width,	// 获取设备宽度分辨率
			myHeigth = window.screen.height;	// 获取设备高度分辨率
		// 防止飞机移除屏幕
		if(clientX - obj.myWidth/2 < 0){
			obj.style.left = 0;
			obj.style.top = clientY - obj.myHeigth/2 + 'px';
		}
		else if(clientX + obj.myWidth/2 > myWidth){
			obj.style.left = myWidth - obj.myWidth + 'px';
			obj.style.top = clientY - obj.myHeigth/2 + 'px';
		}
		else if(clientY - obj.myHeigth/2 < 0){
			obj.style.left = clientX - obj.myWidth/2 + 'px';
			obj.style.top = 0;
		}
		else if(clientY + obj.myHeigth/2 > myHeigth){
			obj.style.left = clientX - obj.myWidth/2 + 'px';
			obj.style.top = myHeigth - obj.myHeigth + 'px';
		}
		else {
			obj.style.left = clientX - obj.myWidth/2 + 'px';
			obj.style.top = clientY - obj.myHeigth/2 + 'px';
		}
	})
}

function fire() {	// 创建子弹方法
	let obj = document.getElementsByClassName('feiJi')[0],	// 获取飞机div
		fjLeft = obj.offsetLeft,	// 获取飞机的Left值
		fjTop = obj.offsetTop,	// 获取飞机的Top值
		zdDiv = document.createElement('div'),
		zdImg = new Image();
	zdImg.src = 'img/fire.png';
	zdDiv.className = 'fire';
	zdDiv.myWidth = 50;
	zdDiv.myHeigth = 60;
	zdDiv.style.cssText = 
		`
			width: ${zdDiv.myWidth}px;
			height: ${zdDiv.myHeigth}px;
			position: absolute;
			left: ${fjLeft + obj.myWidth/2 - zdDiv.myWidth/2}px;
			top: ${fjTop - obj.myHeigth/2}px;
		`
	zdImg.style.cssText = "width: 100%;height: 100%;"
	zdDiv.appendChild(zdImg);
	kaiShi.appendChild(zdDiv);
	// requestAnimationFrame(fire);
	setTimeout(function() {fire()}, 10);
}

function fireRun() {	// 子弹运动方法
	let zdarr = document.getElementsByClassName('fire');	// 获取子弹集合
	if(zdarr.length>0){	// 判断是否获取到子弹，获取到了则
		for (let i = 0; i < zdarr.length; i++) {	// 遍历所有子弹
			zdarr[i].style.top = zdarr[i].offsetTop - 10 + 'px';	// 让子弹每次向上移动10px
			if(zdarr[i].offsetTop + zdarr[i].offsetHeight < 0)	// 判断子弹是否超出屏幕范围，超出则
				kaiShi.removeChild(zdarr[i]);	//删除子弹
		}
		// requestAnimationFrame(fireRun);
		setTimeout(function() {fireRun()}, 10);
	}
}
